import ApiSystemMenu from '@/services/system/ApiSystemMenu';
import { FormItemProps } from '@/typing';
import { handleTree } from '@/utils/utils';
import { TreeSelect } from 'antd';
import React, { useEffect } from 'react';

const SystemMenuSelect: React.FC<FormItemProps> = (props) => {
  const [treeData, setTreeData] = React.useState<any[]>([]);
  const fetchData = async () => {
    const menuList = await ApiSystemMenu.list({});
    const subMenuTree: any[] = handleTree(menuList, 'menuId');
    const menuTree = { menuId: 0, menuName: '主类目', children: [] } as any;
    menuTree.children = subMenuTree;
    setTreeData([menuTree]);
  };
  useEffect(() => {
    fetchData().then(() => {});
  }, []);

  return (
    <TreeSelect
      value={props.value}
      onChange={(value) => props?.onChange?.(value)}
      treeData={treeData}
      fieldNames={{ label: 'menuName', value: 'menuId', children: 'children' }}
    ></TreeSelect>
  );
};

export default SystemMenuSelect;
